import React, { useState, useEffect } from "react";
import * as echarts from "echarts";

export default function WelcomeSon(props) {
  console.log(props);
  let [main, setMain] = useState("");
  const option = {
    title: {
      text: "千峰学生来源",
      subtext: "日期",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },

    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: props.list,
        label: {
          show: true,
          position: "inside", //outside 外部显示  inside 内部显示
          formatter: `{d}%`,
          color: "#ffffff", //颜色
          fontSize: 12, //字体大小
        },
      },
    ],
  };
  useEffect(() => {
    var node = document.getElementById(`${props.id}`);
    setMain(node);
  }, [main]);
  if (main !== "") {
    var myChart = echarts.init(main);
    myChart.setOption(option);
  }
  return <div style={{ height: "500px", width: "600px" }} id={props.id}></div>;
}
